<!-- 余额提现页面 -->
<template>
	<view>
		<!-- 导航条 -->
		<u-tabs :list="list" :is-scroll="false" :show-bar="false" active-color="#00C9B1" :current="current" @change="tabsChange"></u-tabs>
		<!-- 提现金额区域 -->
		<view class="out-money-container-box">
			<view class="out-money-item-box">
				<text>
					账户余额将提现
					<text>{{ current === 0 ? '支付宝' : '银行卡' }}</text>
				</text>
				<navigator url="/myPackageA/pages/views/modify-data" class="tip-text">查看</navigator>
			</view>
			<view class="out-money-item-box money-number">
				<u-input
					class="out-money-input"
					:clearable="false"
					height="112"
					v-model="outMoneyValue"
					placeholder="请输入提现金额"
					placeholder-style="color: #121922;"
					type="number"
				/>
			</view>
			<view class="out-money-item-box">
				<text>账户余额：￥{{ outMoneyNumber }}</text>
				<view class="tip-text whole-out" @click="wholeOutMoneyClick">全部提现</view>
			</view>
		</view>
		<!-- 提示手续费 -->
		<view class="sercice-money-box">
			<text>
				注：系统扣除
				<text style="color: #FF2E2E">{{outMoneyRate}}%</text>
				手续费
			</text>
		</view>
		<!-- 立即提现按钮 -->
		<view class="sercice-money-box">
			<view class="now-money"><u-button :custom-style="submitBtnStyle" :hairLine="false" @click="nowOutMoneyClick">立即提现</u-button></view>
		</view>
		<!-- 提现记录 -->
		<view class="out-money-record-box">
			<view class="title">提现记录</view>
			<block v-if="recordDataList.length < 1">
				<u-empty text="暂无提现记录" mode="history"></u-empty>
			</block>
			<!-- 循环渲染提现记录数据列表 -->
			<block v-else>
				<block v-for="outMoneyItem in recordDataList" :key="outMoneyItem.id">
					<view class="out-money-record-item" @click="outMoneyItemClick(outMoneyItem)">
						<view class="item-top">
							<text class="money">提现￥{{ outMoneyItem.money || 0.00 }}</text>
							<text style="font-size: 24rpx;">{{ outMoneyItem.create_time || '' }}</text>
						</view>
						<view class="item-top">
							<text style="font-size: 26rpx;">订单编号：{{ outMoneyItem.trade_no || '' }}</text>
							<text class="out-money-text" v-if="outMoneyItem.status === 2">提现成功</text>
							<text class="out-money-text" v-else-if="outMoneyItem.status === 1" style="color: #FA7D00;">审核中</text>
							<text class="out-money-text" v-else style="color: #FF2E2E;">提现失败</text>
						</view>
					</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {		// 获取提现记录的筛选条件
				page: 1,
				page_size: 10,
			},
			// 提现接口所需参数
			outMoneySortData: {
				money: '',		// 提现金额
				type: 1,		// 1：支付宝 2：银行卡 3：对公银行卡
			},
			list: [
				{
					name: '支付宝提现'
				},
				{
					name: '银行卡提现'
				}
			],
			current: 0,
			// 提现金额
			outMoneyValue: '',
			// 账户余额
			outMoneyNumber: 0,
			outMoneyRate: 0,	// 提现扣除手续费的百分比
			// 提现列表数据
			recordDataList: [],
			submitBtnStyle: {
				height: '96rpx',
				borderRadius: '48rpx',
				fontSize: '32rpx',
				fontFamily: 'Adobe Heiti Std',
				fontWeight: 'normal',
				backgroundColor: '#00C9B1',
				color: '#ffffff',
				border: 0
			}
		};
	},
	onLoad(options) {
		this.getOutMoneyDataList()
		// 将 my-money 页面传递过来的账户余额赋值给可提现金额
		if(options.type == 1) {
			this.outMoneyNumber = options.money
			this.outMoneyRate = options.rate
		}
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.recordDataList = []
		await this.getOutMoneyDataList()
		uni.stopPullDownRefresh()
		this.$u.toast('页面已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getOutMoneyDataList()
	},
	methods: {
		// 获取提现记录
		async getOutMoneyDataList() {
			const res = await this.$u.api.getOutMoneyDataList(this.sortData)
			if(!res) return
			if(res.length < 1) return this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
			this.recordDataList = [...this.recordDataList, ...res]
			// console.log('提现记录', this.recordDataList);
		},
		// 顶部导航栏的点击事件
		tabsChange(index) {
			this.current = index;
		},
		// 提现记录数据项的点击事件(这里得到了整个数据项，可能后续只需要 id 或者订单编号)
		outMoneyItemClick(outMoneyItem) {
			// 如果数据项状态为 2 则表示正在审核中，跳转到审核中页面
			if (outMoneyItem.status === 1) {
				this.$u.route({
					type: 'to',
					url: '/myPackageA/pages/views/submitted-for-review'
				});
			} else {
				// 否则跳转到 提现记录详情页（成功失败都是这个页面）
				this.$u.route({
					type: 'to',
					url: '/myPackageA/pages/views/out-money-item-detail',
					params: {		// 需要传递到下个页面显示的参数
						create_time: outMoneyItem.create_time,
						money: outMoneyItem.money,
						reason: outMoneyItem.reason,
						status: outMoneyItem.status,
						trade_no: outMoneyItem.trade_no,
						bank_id: outMoneyItem.json.bank_id || '',
						bank_name: outMoneyItem.json.bank_name || '',
						card: outMoneyItem.json.card || '',
						name: outMoneyItem.json.name,
						account:  outMoneyItem.json.account || '',	// 支付宝账号
					}
				});
			}
		},
		// 全部提现按钮的点击事件
		wholeOutMoneyClick() {
			// 将账户余额赋值给提现金额
			this.outMoneyValue = this.outMoneyNumber;
		},
		// 立即提现按钮点击事件
		async nowOutMoneyClick() {
			// 如果没有输入提现金额则先提示一下
			if (this.outMoneyValue.toString().trim() === '') return this.$u.toast('请输入提现金额');
			// TODO:处理后续的提现逻辑
			this.outMoneySortData.money = this.outMoneyValue
			this.outMoneySortData.type = this.current + 1
			const res = await this.$u.api.nowOutMoney(this.outMoneySortData)
			if(!res) return
			if(res.type === -1) {	// 如果 type 为 -1 则表示用户的支付宝或者银行卡信息暂未完善
				this.$u.route('/myPackageA/pages/views/modify-data')
				this.$u.toast('请先完善所需账户资料')
			}
			// 提现成功
			this.outMoneyNumber = res.balance
			this.outMoneyRate = res.rate
			this.sortData.page = 1
			this.recordDataList = []
			this.outMoneyValue = ''
			this.getOutMoneyDataList()		// 重新获取提现记录
			this.$u.toast('提现申请提交成功')
			this.$u.vuex('vuex_isSubmit', true)		// 通知 钱包页面 需要刷新页面数据了
		}
	}
};
</script>

<style lang="scss" scoped>
.out-money-container-box {
	height: 338rpx;
	margin: 16rpx 30rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 27rpx 0 41rpx;
	.out-money-item-box {
		height: 33.3%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: SourceHanSansSC;
		font-weight: 400;
		color: #7c838d;
		.out-money-input {
			width: 100%;
			height: 100%;
			line-height: 100%;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #121922;
		}
		.whole-out {
			width: 146rpx;
			height: 62rpx;
			background: #e5f9f7;
			border-radius: 31rpx;
			line-height: 62rpx;
			text-align: center;
		}
	}
	.money-number {
		border-bottom: 1rpx solid #e4e4ee;
	}
}
.tip-text {
	font-size: 28rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #00c9b1;
}
.sercice-money-box {
	height: 96rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #7c838d;
	padding: 33rpx;
	display: flex;
	align-items: center;
}
.now-money {
	width: 100%;
	height: 96rpx;
	// border-radius: 48rpx;
	// font-size: 32rpx;
	// font-family: Adobe Heiti Std;
	// font-weight: normal;
	// background-color: $u-text-color;
	// justify-content: center;
	// color: #ffffff;
	
}
.out-money-record-box {
	margin-top: 45rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #97979f;
	.title {
		padding: 0 26rpx;
		line-height: 80rpx;
	}
	.out-money-record-item {
		box-shadow: 0px 1rpx 0px 0px #e7eaf0;
		display: flex;
		flex-direction: column;
		padding: 10rpx 0;
		.item-top {
			padding: 0 26rpx;
			line-height: 55rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.money {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #141418;
			}
		}
	}
}
.out-money-text {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #00c9b1;
}
</style>
